<template>
  <el-table :data="list" row-key="id" border default-expand-all class="tableData">
    <el-table-column label="标题">
      <template #default="scope">
        <el-input v-model="scope.row.title" placeholder="请输入标题名" type="textarea" autosize />
      </template>
    </el-table-column>
    <el-table-column label="类型" width="150">
      <template #default="scope">
        <el-select v-model="scope.row.type" placeholder="请选择类型">
          <el-option label="单选" value="input" />
          <!--  <el-option label="下拉选项" value="select" />
          <el-option label="单选框" value="radio" />
          <el-option label="多选框" value="checkbox" />
          <el-option label="关联性" value="relation" /> -->
          <el-option label="上传图片" value="image" />
          <el-option label="模板上传" value="templateFile" />
          <el-option label="上传文件" value="file" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="默认值" width="100" align="center">
      <template #default="scope">
        <el-tooltip class="box-item" effect="dark" :content="desc_format(scope.row.intro)" placement="top">
          <div style="margin-right: 10px;">
            <el-button icon="ChatDotSquare" type="primary" plain circle @click="handClick(scope.row,4)" size="small" v-if="proxy.$utils.hasChinese(scope.row.intro)" />
            <el-button icon="ChatDotSquare" circle @click="handClick(scope.row,4)" size="small" v-else />
          </div>
        </el-tooltip>

        <!-- 上传模板 -->
        <div v-if="scope.row.type=='templateFile'">
          <el-tooltip v-if="scope.row.file&&scope.row.file.length" class="box-item" effect="dark" :content="templateFile_format(scope.row.file)" placement="top">
            <el-button icon="Printer" type="primary" plain circle @click="handClick(scope.row,3)" size="small" />
          </el-tooltip>

          <el-button text size="small" type="primary" @click="handClick(scope.row,3)" v-else :disabled="scope.row.type!='templateFile'">上传模板</el-button>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" width="105">
      <template #header>
        <el-button type="primary" circle @click="add" icon="plus" size="small"></el-button>
      </template>
      <template #default="scope">
        <el-button type="primary" circle @click="handClick(scope.row,1)" icon="plus" size="small"></el-button>
        <el-button type="danger" circle @click="handClick(scope.row,2)" icon="Delete" size="small"></el-button>
      </template>
    </el-table-column>
  </el-table>

  <FileUploader ref="FileUploaderRef" dataType="jsonArr" v-if="tableData.length" v-model="tableData[current].file"></FileUploader>

  <el-dialog v-model="dialogVisible" title="描述" width="800" :before-close="handleClose" append-to-body>
    <Editor v-model="selectRow.intro" :minHeight="500"></Editor>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="save">
          确 认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
//counter
import useCounterStore from "@/store/counter";
const counter = useCounterStore();
let props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);

let dialogVisible = ref(false);
let selectRow = ref({}); //选中的 row

let list = ref([]);
let tableData = ref([]);
let oneArr = []; //一维数组
let current = ref(0);

function add() {
  let uid = proxy.$utils.generateUUID();
  list.value.push({
    id: uid,
    title: "",
    type: "input",
    parentId: "",
    file: [],
  });
}

function save() {
  let index = proxy.$utils.findIndexByField(
    tableData.value,
    "id",
    selectRow.value.id
  );
  if (index != -1) {
    tableData.value[index].intro = selectRow.value.intro;
    handleClose();
  }
}

function desc_format(e) {
  if (proxy.$utils.hasChinese(e)) {
    let arr = proxy.$utils.getChineseCharacters(e);
    let str = "";
    arr.forEach((item) => {
      str += item;
    });
    return str;
  } else {
    return "请输入描述";
  }
}

function templateFile_format(arr) {
  let list = [];
  arr.forEach((element) => {
    list.push(element.name);
  });
  return list.toString();
}

function handleClose() {
  selectRow.value = {};
  dialogVisible.value = false;
}

function handClick(row, num) {
  switch (num) {
    case 1:
      let model = {
        id: proxy.$utils.generateUUID(),
        parentId: row.id,
        type: "",
        title: "",
        file: [],
      };
      if (proxy.$utils.isFieldEqual(tableData.value, "id", model.id)) {
        proxy.$utils.showToast("id 重复");
        return;
      }
      tableData.value.push(model);
      break;
    case 2:
      let index = proxy.$utils.findIndexByField(tableData.value, "id", row.id);
      if (index != -1) tableData.value.splice(index, 1);
      break;
    case 3:
      console.log("tableData.value", tableData.value);
      current.value = proxy.$utils.findIndexByField(
        tableData.value,
        "id",
        row.id
      );
      console.log("current.value", current.value);
      setTimeout(() => {
        proxy.$refs.FileUploaderRef.open();
      }, 500);

      break;
    case 4:
      selectRow.value = { ...row };
      console.log("shaoshao", selectRow.value);
      dialogVisible.value = true;
      break;
    default:
      break;
  }
}

function flattenArray(arr) {
  let result = [];
  arr.forEach((item) => {
    result.push(item);
    if (item.children) {
      result = result.concat(flattenArray(item.children));
      delete item.children; // 可选，如果不想改变原数组结构可以不删除 children
    }
  });
  return result;
}

watch(
  () => props.modelValue,
  (newValue, oldValue) => {
    if (newValue) tableData.value = proxy.$utils.deepcopy(newValue);
  },
  { deep: true, immediate: true }
);

watch(
  () => tableData.value,
  (newValue, oldValue) => {
    if (newValue)
      list.value = proxy.$utils.transformArray([...newValue], "id", "parentId");
  },
  { deep: true, immediate: true }
);

watch(
  () => list.value,
  (newValue, oldValue) => {
    if (newValue) {
      let copyArr = proxy.$utils.deepcopy(props.modelValue);
      let deepArr = proxy.$utils.deepcopy(newValue);
      let oneArr = flattenArray(deepArr);
      if (!proxy.$utils.arraysAreEqual(copyArr, oneArr))
        emit("update:modelValue", oneArr);
    }
  },
  { deep: true, immediate: true }
);
</script>



<style lang="scss" scoped>
.input-title {
  //width: auto;
}
::v-deep.tableData {
  .cell {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .inputWidthAuto {
    width: auto;
  }
}
</style>






